<template>
  <section class="page-container">
    <section class="search-form">
      <el-inline-form
        ref="customInlineFormRef"
        label-size="default"
        :model="searchParams"
        @do-search="doSearchHandle"
      >
        <el-inline-form-item
          label="规则名称:"
          prop="ruleName"
        >
          <el-input
            v-model="searchParams.ruleName"
            placeholder="请输入规则名称"
            clearable
          />
        </el-inline-form-item>
        <el-inline-form-item
          label="描述:"
          prop="describe"
        >
          <el-input
            v-model="searchParams.describe"
            placeholder="请输入描述"
            clearable
          />
        </el-inline-form-item>
        <el-inline-form-item
          label="调用次数:"
          prop="frequency"
        >
          <el-input
            v-model="searchParams.frequency"
            placeholder="请输入调用次数"
            clearable
          />
        </el-inline-form-item>
        <el-inline-form-item
          label="状态:"
          prop="status"
        >
          <el-select
            v-model="searchParams.status"
            placeholder="请选择状态"
            clearable
            filterable
          >
            <el-option
              label="开启"
              :value="1"
            />
            <el-option
              label="关闭"
              :value="2"
            />
          </el-select>
        </el-inline-form-item>
        <el-inline-form-item
          label="调用时间:"
          prop="useTime"
        >
          <el-date-picker
            v-model="searchParams.useTime"
            type="date"
            placeholder="选择调用时间"
          />
        </el-inline-form-item>
        <el-inline-form-item
          v-if="showMore"
          label="创建人:"
          prop="createUser"
        >
          <el-input
            v-model="searchParams.createUser"
            placeholder="请输入创建人"
            clearable
          />
        </el-inline-form-item>
        <el-inline-form-item
          v-if="showMore"
          label="IP:"
          prop="ip"
        >
          <el-input
            v-model="searchParams.ip"
            placeholder="请输入IP"
            clearable
          />
        </el-inline-form-item>
      </el-inline-form>
      <el-divider>
        <span
          v-if="showMore"
          class="show-more-btn"
          @click="toggleHandle"
        >
          <base-svg-icon
            icon-class="arrow-up-circle"
            class="icon"
          /> 收起
        </span>
        <span
          v-else
          class="show-more-btn"
          @click="toggleHandle"
        >
          <base-svg-icon
            icon-class="arrow-down-circle"
            class="icon"
          /> 展开
        </span>
      </el-divider>
    </section>

    <el-operate-block class="mt-12 mb-12">
      <template #actions>
        <el-button
          v-blur
          :disabled="!selectedRows.length"
          @click="showSelectedHandle"
        >
          查看已选
        </el-button>
        <el-button
          v-blur
          type="primary"
          @click="doEditHandle"
        >
          添加
        </el-button>
      </template>
    </el-operate-block>

    <base-table
      v-loading="loading"
      :data="tableData"
      :columns="columns"
      :selection="true"
      border
      @selection-change="selectionChange"
    />

    <base-pagination
      :total="total"
      :page-sizes="[10, 20, 30, 40, 50]"
      @do-change="pageChangeHandle"
    />

    <edit-rules
      v-model:visible="showEditDialog"
      :is-edit="isEdit"
      :params="editParams"
    />

    <show-selected
      v-model:visible="showSelectedDialog"
      :selected-data="selectedRows"
    />
  </section>
</template>

<script lang="tsx">
import {
  defineComponent,
  reactive, toRefs,
  ref,
  onMounted,
} from 'vue';

import EditRules from '../components/edit-rules.vue';
import ShowSelected from '../components/show-selected.vue';
import { getTableData } from '../tools';

import type { DataItem, SearchParamsType } from '@/types/table.d';
import type { FormInstance } from 'hive-plus';

import { formatDate } from '@/utils/index';

  interface StateInterface {
    loading: boolean,
    tableData: DataItem[],
    total: number,
    searchParams: SearchParamsType,
    selectedRows: DataItem[],
    showEditDialog: boolean,
    isEdit: boolean,

    showSelectedDialog: boolean,
    editParams: TypeObject,

    columns: TypeObject[],
  }

export default defineComponent({
  name: 'TableList2',
  components: {
    EditRules,
    ShowSelected,
  },
  setup() {
    const searchFormRef = ref();

    const customInlineFormRef = ref<FormInstance | undefined>();
    const showMore = ref(false);

    const state: StateInterface = reactive({
      loading: false,
      searchParams: {
        pageNum: 1,
        pageSize: 10,
        ruleName: '',
        describe: '',
        status: '',
        frequency: '',
        useTime: '',
        createUser: '',
        useUser: '',
        ip: '',
      },

      tableData: [],
      total: 0,
      columns: [
        {
          prop: 'ruleName',
          label: '规则名称',
          'min-width': '130',
          fixed: 'left',
          'show-overflow-tooltip': true,
        },
        {
          prop: 'createUser',
          label: '创建人',
          'min-width': '90'
        },
        {
          prop: 'ip',
          label: 'IP',
          'min-width': '120'
        },
        {
          prop: 'describe',
          label: '描述',
          'min-width': '130',
          'show-overflow-tooltip': true,
        },
        {
          prop: 'frequency',
          label: '服务调用次数',
          'min-width': '100'
        },
        {
          prop: 'status',
          label: '状态',
          formatter: (row?: { status: number }) => (row?.status === 1 ? '开启' : '关闭'),
          'min-width': '100'
        },
        {
          prop: 'useTime',
          label: '上次调用时间',
          formatter: (row?: { useTime: string }) => formatDate(row?.useTime || ''),
          'min-width': '150'
        },
        {
          prop: 'useUser',
          label: '调用人',
          'min-width': '100'
        },
        {
          prop: 'options',
          label: '操作',
          width: 150,
          fixed: 'right',
          render: (params: { [key: string]: any }) => (
            <>
              <el-button
                v-blur
                type="primary"
                link
                onClick={
                  () => {
                    doEditHandle(params.row);
                  }
                }>
                    配置
              </el-button>

              <el-button v-blur type="primary" link>
                    订阅报警
              </el-button>
            </>
          ),
        }
      ],

      showSelectedDialog: false,
      selectedRows: [], // 多选选中内容

      showEditDialog: false,
      isEdit: false,
      editParams: {},
    });

    const doSearchHandle = (firstPage = false) => {
      if (firstPage) {
        state.searchParams.pageNum = 1;
      }
      state.loading = true;
      setTimeout(() => {
        state.loading = false;
        const searchResult = getTableData(state.searchParams);
        state.tableData = searchResult.result;
        state.total = searchResult.total;
      }, 500);
    };

    const doEditHandle:Func = (params?: DataItem) => {
      state.showEditDialog = true;
      state.isEdit = !!(params && Object.keys(params).length);
      state.editParams = params || {};
    };

    const pageChangeHandle = (params: {currentPage: number, pageSize: number}) => {
      state.searchParams.pageNum = params.currentPage;
      state.searchParams.pageSize = params.pageSize;

      doSearchHandle();
    };

    const selectionChange = (selection: DataItem[]) => {
      state.selectedRows = selection;
    };

    onMounted(() => {
      doSearchHandle(true);
    });

    return {
      ...toRefs(state),
      customInlineFormRef,
      searchFormRef,
      doSearchHandle,
      doEditHandle,
      pageChangeHandle,
      selectionChange,
      showSelectedHandle: () => {
        state.showSelectedDialog = true;
      },
      showMore,
      toggleHandle: () => {
        showMore.value = !showMore.value;
        customInlineFormRef.value?.update(); // 自动更新查询表单布局
      },
    };
  },
});
</script>
<style lang="scss" scoped>
  .options-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
  }

  :deep(.#{$namespace}-divider--horizontal) {
    margin: 0 !important;
  }

  .show-more-btn {
    padding: 6px;
    color: var(--#{$namespace}-color-primary);
    cursor: pointer;

    .icon {
      font-size: 14px;
    }

    &:hover {
      color: var(--#{$namespace}-color-primary);
    }
  }
</style>
